<template>
  <div class="qwdz">
    <!-- 全屋定制页面 -->
    <div class="center">
      <!-- banner -->
      <div class="banner">
        <img src="../../public/qwdz_img/banner (1).png" alt="" />
        <!-- 跳转到咨询页面 -->
        <button class="btn1">在线咨询 ></button>
        <!-- 弹出报名弹窗 -->
        <button class="btn2">立即报名 ></button>
      </div>
      <!-- F1 -->
      <div class="f1">
        <div class="bg01">
          <!-- <img src="../../public/qwdz_img/bj01.jpg" alt="" /> -->
        </div>
        <div class="title01">
          <img src="../../public/qwdz_img/title01.png" alt="" />
        </div>
        <div class="sj">
          <img src="../../public/qwdz_img/sj.png" alt="" />
        </div>
      </div>
      <!-- F2 -->
      <div class="f2">
        <div class="title2">
          <img src="../../public/qwdz_img/title02.png" alt="" />
        </div>
        <div class="f2_body">
          <img src="../../public/qwdz_img/02_1.png" alt="" />
          <img src="../../public/qwdz_img/02_2.png" alt="" />
          <img src="../../public/qwdz_img/02_3.png" alt="" />
        </div>
      </div>

      <!-- F3 -->
      <div class="f3">
        <img src="../../public/qwdz_img/title03.png" alt="" />
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide class="swiper-slide">
              <img src="../../public/qwdz_img/lb01.jpg" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide">
              <img src="../../public/qwdz_img/lb02.jpg" alt="">
          </swiper-slide>
          <swiper-slide class="swiper-slide">
              <img src="../../public/qwdz_img/lb03.jpg" alt="">
          </swiper-slide>
          
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>

      <!-- F4 -->
      <div class="f4">
          <img class="title4" src="../../public/qwdz_img/title04.png" alt="">
          <img class="lc" src="../../public/qwdz_img/lc.png" alt="">
      </div>

      <!-- F5 -->
      <div class="f5">
          <img src="../../public/qwdz_img/gr.jpg" alt="">
          <img src="../../public/qwdz_img/quality.jpg" alt="">
      </div>

      <!-- F6 -->
      <div class="f6">
          <!-- <img src="../../public/qwdz_img/yy.jpg" alt=""> -->
          <!-- 跳转到预约窗口 -->
          <!-- <div class="f6_btn"></div> -->
          <yu-yue/>
      </div>
    </div>
  </div>
</template>

<script>
import YuYue from '@/components/YuYue.vue';
export default {
  components: { YuYue },
    data() {
      return {
        swiperOption: {
            loop:true,
            height:100,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
};
</script>

<style lang="scss" scoped>
</style>
<style lang="css" src="../assets/css/reset.css"></style>
<style lang="scss" src="../assets/css/house_custom.scss"></style>